<template>
  <div class="user-content">
    <Header></Header>
    <div class="bg-image">
      <img src="../assets/horse.jpg" alt="">
    </div>
    <div class="avatar-content" >
      <div class="avatar" @click="expand ">
        <img :src="state.data['avatar']" alt="">
        <span class="name">{{ state.data['nickname'] }}<p>{{ state.data['signature'] }}</p>
        </span>
        
      </div>

      <div class="sort-icon">
        <ul>
          <li>
            <van-icon name="records-o" size="1rem" color="#af3c2b" />
            <p>留言</p>
          </li>
          <li @click="sourceCode">
            <van-icon name="link-o" size="1rem" color="#af3c2b" />
            <p>源码</p>
          </li>
          <li>
            <van-icon name="records-o" size="1rem" color="#af3c2b" />
            <p>博客站点</p>
          </li>
          <li @click="showShare = true">
            <van-icon name="guide-o" size="1rem" color="#af3c2b" />
            <p>分享</p>
          </li>
        </ul>
      </div>

      <div class="footer-content">
        <ul>
          <li>
            <p><van-icon name="description" color="#f5bf65" size="0.5rem" /><span>关于作者</span></p>
            <van-icon name="arrow" color="#c5c5c5" size="0.5rem" />
          </li>
          <li>
            <p><van-icon name="delete" color="#828dee" size="0.5rem" /><span>清除数据</span></p>
            <van-icon name="arrow" color="#c5c5c5" size="0.5rem" />
          </li>
          <li @click="changeUesr">
            <p><van-icon name="exchange" color="#e97376" size="0.5rem" /><span>更改信息</span></p>
            <van-icon name="arrow" color="#c5c5c5" size="0.5rem" />
          </li>
          <li @click="quitLogin">
            <p><van-icon name="clear" color="#e97376" size="0.5rem" /><span>退出登录</span></p>
            <van-icon name="arrow" color="#c5c5c5" size="0.5rem" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 分享 -->
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    <Footer></Footer>
  </div>
</template>

<script setup>
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from '@/api/index.js';
import { reactive, ref } from 'vue';
import { showConfirmDialog } from 'vant';
import { showToast } from 'vant';

const router = useRouter()

const state = reactive({
  data: [],
})

const res = ref([])

// console.log(res.value);


const showShare = ref(false);
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
];

const onSelect = (option) => {
  showToast(option.name);
  showShare.value = false;
};





// 获取用户的信息
onMounted(async () => {

  // 获取会话储存的信息
  let data = JSON.parse(sessionStorage.getItem('useInfo'));
  // console.log(data);

  if (!data) {
    showToast('用户未登录')
    router.push('/login')
    return
  }
  const getUsername = data.username
  // console.log(getUsername);

  const result = await axios.get('/users/userinformation', {
    params: {
      username: getUsername
    }
  })
  // console.log(result);
  state.data = result.data[0]
})

// 点击修改用户的信息
const changeUesr = () => {
  // console.log(state.data['username']);
  router.push({ path: '/changeUserInformation', query: { 'username': state.data['username'] } })
}

// 退出登录
const quitLogin = () => {

  showConfirmDialog({
    title: '退出',
    message:
      '确认是否退出登录。',
  })
    .then(() => {
      // on confirm
      sessionStorage.clear();
      router.push('/login')
    })
    .catch(() => {
      // on cancel
    });


}

// 源码跳转
const sourceCode = () => {
  window.open('https://gitee.com/minimum-guarantee/blog.git')
}


// 展开个人
const expand=()=>{
  router.push('/person')

}

</script>

<style lang="less" scoped>
.user-content {
  background-color: #f7f7f7;
  height: 100vh;

  .bg-image {

    img {
      height: 4rem;
      width: 100%;
      position: absolute;
      top: 0;
    }
  }

  .avatar-content {
    height: 4.5rem;
    padding-top: 2.5rem;
    margin: 0.5rem 0.2rem 0.2rem 0.2rem;

    .avatar {
      height: 2rem;
      border: 1px solid #fff;
      display: flex;
      padding: 0.5rem 0.2rem 0.2rem 0;
      border-radius: 5%;

      img {
        height: 2rem;
        width: 2rem;
        border-radius: 50%;
      }

      .name {
        font-weight: bold;
        font-size: 24px;
        height: 2rem;
      }

      p {
        font-size: 14px;
        color: #3f4041;
        padding-top: 0.8rem;

      }
    }

    .sort-icon {
      height: 2rem;

      ul {
        height: 2rem;
        display: flex;
        justify-content: space-between;
        text-align: center;
        margin-top: 0.2rem;

        li {
          p {
            font-size: 0.4rem;
          }
        }
      }
    }
  }

  .footer-content {
    height: 4rem;

    ul {

      li {
        display: flex;
        justify-content: space-between;
        margin-top: 0.6rem;

        span {
          font-size: 0.6rem;
        }
      }
    }
  }
}
</style>